<template>
  <div class="dplayer-box">

    <ul v-if="sourcesList && sourcesList.length > 1" class="video">
      <li
        v-for="(item, index) in sourcesList"
        :key="index"
        @click="onswitchVideo(item, index)"
      >
        <div v-if="openInx === index" class="text">播放中</div>
        <div v-else class="text">回放{{ index + 1 }}</div>

        <video :src="item.url" controls="controls">
          {{ item.src }}
        </video>
      </li>
    </ul>
    <ul v-else class="video">
      <li v-for="(item, index) in sourcesList" :key="index">
        <div class="text">播放中</div>
      </li>
    </ul>
    <div id="dplayer" class="play-root" />
    <!-- <div @click="onPlay">点我播放</div> -->
  </div>
</template>

<script>
import DPlayer from "dplayer";
export default {
  name: "OptimizeVideo",
  props: ["sources"],
  data() {
    return {
      playImg: require("@/assets/images/play.png"),
      dp: null,
      sourcesList: this.sources,
      openInx: 0
    };
  },

  // 一定要在mounted中创建
  mounted() {
    this.dp = new DPlayer({
      // 配置参数
      container: document.getElementById("dplayer"),
      autoplay: false,
      theme: "#FADFA3",
      loop: true,
      lang: "zh-cn",
      preload: "auto",
      // logo: 'logo.png',
      volume: 0.7,
      video: {
        url: this.sourcesList[0].url,
        pic: "dplayer.png",
        type: "auto"
      }
    });

    // 禁止右键下载视频
    document.oncontextmenu = new Function("event.returnValue=false;");
    document.onselectstart = new Function("event.returnValue=false;");

    // 修改循环播放显示
    document
      .getElementsByClassName("dplayer-setting-item dplayer-setting-loop")[0]
      .getElementsByClassName("dplayer-label")[0].innerText = "循环播放";
    // 修改倍速播放显示
    document
      .getElementsByClassName("dplayer-setting-item dplayer-setting-speed")[0]
      .getElementsByClassName("dplayer-label")[0].innerText = "播放倍速";
  },
  methods: {
    onPlay() {
      this.dp.play();
    },
    onswitchVideo(item, index) {
      this.openInx = index;
      this.dp.switchVideo({
        url: item.url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.play-root {
  width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.dplayer-box {
  width: 100%;
}
/* 在浏览器找到对应的class名称。然后通过穿透对样式进行更改 */

/* 禁止循环播放显示 */
/* .paly-root >>> .dplayer-setting-loop {
    background-color: cyan;
    display: none;
  } */

/* 禁止出现快进多少秒提示 */
/* .play-root /deep/ .dplayer-notice {
    display: none;
  } */

/* 禁止右键自定义列表 */
.play-root /deep/ .dplayer-menu-show {
  display: none;
}

.video {
  display: flex;
  margin-bottom: 15px;
  li {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 4px;
    overflow: hidden;

    cursor: pointer;
    .text,
    .playImg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    .text {
      color: white;
    }
  }
  li:not(:first-child) {
    margin-left: 15px;
  }
  li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 5;
  }
}
video {
  width: 100%;
  height: 100%;
}
video::-webkit-media-controls {
  display: none !important;
}
</style>
